<template>
  <div class="dataBox1">
    <div class="titles-text">
      <span>任务总量</span>
      <span>{{total}}</span>
    </div>
    <div class="dataBoxs">
      <div class="dataBoxs-in">
        <dv-charts class="ring-charts" :option="option1" />
        <div class="charts-name">待编辑</div>
        <div class="charts-num">{{num1}}</div>
      </div>
      <div class="dataBoxs-in">
        <dv-charts class="ring-charts" :option="option2" />
        <div class="charts-name">待审核</div>
        <div class="charts-num">{{num2}}</div>
      </div>
      <div class="dataBoxs-in">
        <dv-charts class="ring-charts" :option="option3" />
        <div class="charts-name">发布中</div>
        <div class="charts-num">{{num3}}</div>
      </div>
      <div class="dataBoxs-in">
        <dv-charts class="ring-charts" :option="option4" />
        <div class="charts-name">已超期</div>
        <div class="charts-num">{{num4}}</div>
      </div>
    </div>
  </div>
</template>
<script>
import apis from "../../public/api";

export default {
  name: "dataBox1",
  data() {
    return {
      cards: [],
      arrays: [],
      total: 0,
      option1: {},
      num1: "",
      option2: {},
      num2: "",
      option3: {},
      num3: "",
      option4: {},
      num4: "",
    };
  },
  methods: {
    createData() {
      this.axios
        .get(apis.queryTaskBrief, {
          //api.sq  为 api.js 文件夹中，名称为 sq 的接口路径
          params: {}
        })
        .then(res => {
          this.num1 = res.data.result.current
          this.num2 = res.data.result.waitReview
          this.num3 = res.data.result.overdue
          this.num4 = res.data.result.history
          this.total = res.data.result.all

          //此处要使用箭头函数，this指向才正确
          // let total =  res.data.result.current + res.data.result.overdue + res.data.result.history+ res.data.result.all
          // this.arrays = [
          //   {
          //     names: "进行中",
          //     num: res.data.result.current + "",
          //     value: (res.data.result.current / res.data.result.all) * 100
          //   },
          //   {
          //     names: "待审核任务",
          //     num: res.data.result.waitReview + "",
          //     value: (res.data.result.waitReview / res.data.result.all) * 100
          //   },
          //   {
          //     names: "已超期任务",
          //     num: res.data.result.overdue + "",
          //     value: (res.data.result.overdue / res.data.result.all) * 100
          //   },
          //   {
          //     names: "已完成任务",
          //     num: res.data.result.history + "",
          //     value: (res.data.result.history / res.data.result.all) * 100
          //   }
          // ];
          // this.total = res.data.result.all; 
          this.option1 = {
            series: [
              {
                type: "gauge",
                startAngle: -Math.PI / 2,
                endAngle: Math.PI * 1.5,
                arcLineWidth: 6,
                radius: "90%",
                data: [
                  {
                    name: "itemA",
                    value: (res.data.result.current / res.data.result.all) * 100,
                    gradient: ["#FFA63D"]
                  }
                ],
                axisLabel: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                pointer: {
                  show: false
                },
                dataItemStyle: {
                  lineCap: "round"
                },
                details: {
                  show: true,
                  formatter: "{value}%",
                  style: {
                    fill: "#fff",
                    fontSize: 30
                  }
                }
              }
            ]
          }
          this.option2 = {
            series: [
              {
                type: "gauge",
                startAngle: -Math.PI / 2,
                endAngle: Math.PI * 1.5,
                arcLineWidth: 6,
                radius: "90%",
                data: [
                  {
                    name: "itemA",
                    value: (res.data.result.waitReview / res.data.result.all) * 100,
                    gradient: ["#F03F58"]
                  }
                ],
                axisLabel: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                pointer: {
                  show: false
                },
                dataItemStyle: {
                  lineCap: "round"
                },
                details: {
                  show: true,
                  formatter: "{value}%",
                  style: {
                    fill: "#fff",
                    fontSize: 30
                  }
                }
              }
            ]
          }
          this.option3 = {
            series: [
              {
                type: "gauge",
                startAngle: -Math.PI / 2,
                endAngle: Math.PI * 1.5,
                arcLineWidth: 6,
                radius: "90%",
                data: [
                  {
                    name: "itemA",
                    value: (res.data.result.overdue / res.data.result.all) * 100,
                    gradient: ["#00D98B"]
                  }
                ],
                axisLabel: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                pointer: {
                  show: false
                },
                dataItemStyle: {
                  lineCap: "round"
                },
                details: {
                  show: true,
                  formatter: "{value}%",
                  style: {
                    fill: "#fff",
                    fontSize: 30
                  }
                }
              }
            ]
          }
          this.option4 = {
            series: [
              {
                type: "gauge",
                startAngle: -Math.PI / 2,
                endAngle: Math.PI * 1.5,
                arcLineWidth: 6,
                radius: "90%",
                data: [
                  {
                    name: "itemA",
                    value: (res.data.result.history / res.data.result.all) * 100,
                    gradient: ["#A1C2E6"]
                  }
                ],
                axisLabel: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                pointer: {
                  show: false
                },
                dataItemStyle: {
                  lineCap: "round"
                },
                details: {
                  show: true,
                  formatter: "{value}%",
                  style: {
                    fill: "#fff",
                    fontSize: 30
                  }
                }
              }
            ]
          }
        })
        .catch(function(error) {
          alert(error);
        });
    }
  },
  mounted() {
    this.createData();
  }
};
</script>

<style lang="less">
.dataBox1 {
  padding: 15px 17px;
  width: 100%;
  height: 304px;
  background: url(../assets/img/border2-1.png) no-repeat center center / 100%
    100%;

  .titles-text {
    width: 100%;
    text-align: center;
    margin-top: 44px;
    margin-bottom: 24px;
    span {
      display: inline;
      font-size: 18px;
      margin-right: 10px;
      color: #afd2fd;
    }
    span:first-child {
      font-size: 16px;
    }
    span:last-child {
      color: #18bbf8;
    }
  }

  .dataBoxs {
    display: flex;
    align-items: center;
    padding-left: 12px;
    &-in {
      margin-right: 27px;
      text-align: center;
      font-size: 16px;
      color: #bdbeca;
      .ring-charts {
        height: 94px;
        width: 94px;
      }
      .charts-name {
        margin-top: 12px;
        margin-bottom: 16px;
        color: #c3cad9;
        font-size: 12px;
      }
      .charts-num {
        font-size: 16px;
        font-weight: 600;
      }
    }
  }
}
.dataBoxs-in:nth-child(1) .charts-num {
  color: #ffa63d;
}
.dataBoxs-in:nth-child(2) .charts-num {
  color: #f92442;
}
.dataBoxs-in:nth-child(3) .charts-num {
  color: #00d98b;
}
.dataBoxs-in:nth-child(4) .charts-num {
  color: #9ecbfc;
}
</style>